<template>
	<view>
		<view class="tabs-box">
			<u-tabs :list="list1" @change="changeTab"  :current="currTab"></u-tabs>
		</view>
		<view v-show="showShop">

			<view class="content">
				<view class="goods-box" v-for="(i,index) in goodslist" :key="i.gID">
					<view class="img-box">
						<image :src="i.img ? 'http://127.0.0.1:3000'+i.img : '/static/imgs/noData.png' " ></image>
						<!-- <image src="/static/imgs/noData.png" mode="" ></image> -->
					</view>
					<view class="name-box">
						{{i.good_name}} {{i.scale}}
					</view>
					<view class="desc-box">
						<text>￥{{i.good_price}}</text>
						<Count :index="index" @add='addgoods' @reduce='reducegoods' v-show="i.num !==0">
						</Count>
						<view v-show="i.num === 0" @click="addfirst(index)">
							<u-icon name="plus-circle-fill" color="#fc5001" size="20"></u-icon>
						</view>

					</view>
				</view>
			</view>
			<view class="pay-box centerX-g">
				<view class="pay-price">
					总价：￥{{total}}
				</view>
				<view class="pay-btn" @click="toPopbuy">
					提交
				</view>
			</view>
		</view>
		<view v-show="!showShop">
			<order :list="orderlist"></order>
		</view>
	</view>
</template>

<script>
	import Count from '@/components/conut.vue'
	import Order from 'pages/shop/order.vue'
	import {
		goodlist,orderlist
	} from '@/common/http.api.js'
	export default {
		components: {
			Count,Order
		},
		data() {
			return {
				showPoP: false,
				orderlist:[],
				goodslist: [],
				// goodslist: [{good_price:1,good_name:'ww',num:0,total:0,gID:1},	{good_price:12,good_name:'w22w',num:0,total:0,gID:2}]
				currTab: 0,
				showShop: true,
				popList: [],
				list1: [{
					type: '0',
					name: '购物',
				}, {
					type: '1',
					name: '订单',
				}],
			}
		},
		computed: {
			total() {
				let total = 0
				this.goodslist.forEach(i => {
					total += i.total
				})
				return total
			},
		},
		onShow() {
			this.getGoodslist()
		},
		methods: {
			changeTab(item) {
				this.currTab = item.index
				// // 点击tabs切换
				if (this.currTab === 0) {
					this.showShop = true
				} else {
					uni.$loading()
					this.showShop = false
					this.getOrderlist()
				}
			},
			async getOrderlist(){
				let uID = uni.getStorageSync('uID')
				const res = await orderlist({uID})
				this.orderlist = res.data
			},
			async getGoodslist() {
				const res = await goodlist()
				this.goodslist = res.data.map(i => {
					return {
						...i,
						num: 0,
						total: 0
					}
				})
				// this.goodslist= [{good_price:1,good_name:'ww',num:0,total:0,gID:1},	{good_price:12,good_name:'w22w',num:0,total:0,gID:2}]
				console.log(this.goodslist);
			},
			toPopbuy() {
				let list = JSON.stringify(this.popList)
				uni.navigateTo({
					url: `/pages/buy/buy?list=${list}`
				})
			},
			addfirst(index) {
				console.log(index);
				this.goodslist[index].num++
				this.goodslist[index].total += this.goodslist[index].good_price
				// 推送到pop数组
				this.popList.push(this.goodslist[index]) // 浅拷贝

			},
			// 商品增加
			addgoods(index) {
				this.goodslist[index].num++
				// 区分每个独立的商品
				this.goodslist[index].total = this.goodslist[index].good_price * this.goodslist[index].num
			},
			// 减少商品
			reducegoods(index) {
				this.goodslist[index].num--
				if (this.goodslist[index].num == 0) {
					this.popList = this.popList.filter(i => i.num !== 0)
				}
				this.goodslist[index].total = this.goodslist[index].good_price * this.goodslist[index].num
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.goods-box {
		margin: 15rpx 0;
		display: flex;
		flex-direction: column;
		height: 400rpx;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 7rpx 0 rgba(0, 0, 0, 0.08);
	}

	.img-box {
		width: 280rpx;
		height: 300rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.name-box {
		padding-left: 10rpx;
		// padding-top: 10rpx;
	}

	.desc-box {
		font-size: 14px;
		color: #21231e;
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay-box {
		bottom: 100rpx;
		position: fixed;
		height: 100rpx;
		display: flex;
		width: 90%;
		font-size: 15px;
		border-radius: 50rpx;
		overflow: hidden;
		line-height: 100rpx;
		text-align: center;

		.pay-price {
			width: 70%;
			color: #fff;
			background-color: #21231e;
		}

		.pay-btn {
			font-weight: bold;
			width: 30%;
			background-color: #ffd661;
		}
	}

	.tabs-box {
		background-color: #fff;
		width: 100%;

		/deep/.u-tabs__wrapper__nav__item {
			padding: 0 160rpx;
		}
	}
</style>
